<template>
  <div class="boxShadow" v-if="gsms" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
      <el-card style="padding-left: 5%; padding-right: 5%">
        <!-- 标题 -->
        <div class="bold box fontSize" v-if="gsms.GSMC">
          <span>{{ gsms.GSMC }}</span>
          <span>({{ gsms.GSBM }})</span>
        </div>
        <!-- 定义 -->
        <div class="box fontSize" v-if='gsms.DY'>
          <span class="bold">定义：</span>
          <span>{{gsms.DY}}</span>
        </div>
        <div v-for="item in tableData" :key="item.BT">
          <!-- 子标题 -->
          <div class="bold box fontSize" v-if='tableData.length > 1'>
            <span>标题:</span>
            <span>({{ item.BT }})</span>
          </div>
          <!-- 描述 -->
          <div class="box fontSize" v-if='item.MS'>
            <span class="bold">描述：</span>
            <span>{{item.MS}}</span>
          </div>
          <p class="title fontSize"><span class="gssm">公式说明</span></p>
            <el-table
              header-align="center"
              :data="item.TableD"
              ref="multipleTable"
              tooltip-effect="dark"
              style="width: 100%"
              class="fontSize"
              border
              :header-cell-style="{ background: '#34adfc', color: '#fff' }"
            >
          <template v-for="(col,index) in item.Tab">
            <el-table-column
              :prop="col.dataItem"
              :label="col.dataName"
              :key="index"
            >
            </el-table-column>
          </template>
        </el-table>
        <!-- 备注 -->
        <div class="box fontSize" v-if='item.BZ'>
          <span class="bold">备注：</span>
          <span>{{item.BZ}}</span>
        </div>
        </div>
        <!-- 说明 -->
        <div class="box fontSize" v-if="gsms.SM">
          <span class="bold">说明：</span>
          <span style="white-space: pre-line">{{ gsms.SM }}</span>
        </div>
        <!-- 意义 -->
        <div class="box fontSize warp" v-if="gsms.YY">
          <span class="bold">意义：</span>
          <span style="white-space: pre-line">{{ gsms.YY }}</span>
        </div>
        <!-- 参考文献 -->
        <div class="box fontSize warp" v-if="gsms.CKWX">
          <span class="bold">参考文献：</span>
          <span class="ckwx" style="white-space: pre-line">{{gsms.CKWX}}</span>
        </div>
      </el-card>

    </div>
</template>
<script>
import {getFormulaDetailsAPI} from '@/api/index.js'
export default {
  name:'publicindex',
  data(){
    return {
      // 表格数据
      tableData: [],
      loading: true,
      gsms:{},
    }
  },
  created(){
    this.tableDetails(this.$route.params.gsbm)
    // this.columnWidth()
  },
  methods: {
    // 改变表格的宽度
    // columnWidth(index){
    //   if(index == 0){
    //     return 200
    //   }
    // },
    // 获取公式详情接口
    async tableDetails (gsbm){
      try {
        const res = await getFormulaDetailsAPI({
        token: "2855ed6102590a02fd52ce00567ee9d4",
        gsbm: gsbm,
        })
        res.data.result.forEach((item) => {
          this.tableData = item.GSMSXX
          this.gsms = item.GSMS
        })
        this.loading = false
      } catch(err) {
        this.loading = false
        console.log(err);
      }

    }
  }
}
</script>
<style scoped>
.gssm{
  margin-left: 10px;
  font-size:20px;
}

.ckwx{
  width: 95%;
  display: block;
  word-break:break-all;
}
</style>
